<template>
    <div class="wrap">
        <ChangeHeader title="最火商品"></ChangeHeader>
    
        <div class="banner_img_wrap">
            <img class="banner_img" src="../images/mainTwo/commodity/banner.png"></img>
        </div>
    
        <div class="content">
    
            <div v-for="(item,index) in HotGoodsData" :key="index">
                <HotTopicItem v-bind:pic="item.top_pic" v-bind:icon="item.top_Icon" v-bind:des="item.des" v-bind:num="item.top_num" />
    
            </div>
            <!-- <HotTopicItem class="margin_top" />
                <HotTopicItem /> -->
            <div class="title">
                <span>&nbsp;</span>
                <a>LOLI直选</a>
                <span>&nbsp;</span>
            </div>
            <div class="loli_direc">
                <HotGoodsItem></HotGoodsItem>
                <HotGoodsItem></HotGoodsItem>
            </div>
    
        </div>
    
    </div>
</template>
<script>
import HotTopicItem from "../components/hotTopicItem.vue"
import HotGoodsItem from "../components/hotGoodsItem"
import ChangeHeader from "../components/changeHeader"



export default {
    name: "hotGoods",
    components: {
        HotTopicItem,
        HotGoodsItem,
        ChangeHeader,
    },
    //组件创建完成后发送网络请求获取数据
    created() {
        var flag = this.$axios.defaults.baseURL == "http://localhost:3000"
        var url = flag ? "/hot_topic" : "/hot_topic.json"
        this.$axios.get(url)
            .then(res => {

                this.$data.HotGoodsData = res.data.data
                console.log(this.$data.HotGoodsData)
            })
            .then(error => {
                console.log(error ? error : '')
            })
    },
    data() {
        return {
            HotGoodsData: [],
            topicData: []
        }
    }
}
</script>

<style lang='less' scoped>
@pub_main_bgcolor :#ff406f;
.headers {
    width: 100%;
    background: @pub_main_bgcolor;
    position: fixed;
    padding-top: 60/75rem;
    font-size: 36/75rem;
    z-index: 3;
    padding-bottom: 16/75rem;
    .headerNav {

        color: #fff;
    }
    .export {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        line-height: 60/75rem;
    }
    .arr {
        font-size: 44/75rem;
        line-height: 60/75rem;
    }
}

.banner_img_wrap {
    background: @pub_main_bgcolor;
    height: 300/72rem;
    width: 100%;
    margin-top: -2px;
    margin-bottom: 100/75rem;
}

.banner_img {
    position: absolute;
    top: 157/75rem;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 1px 10px #888888;
    border-radius: 20px;
    width: 711/75rem;
    height: 300/75rem;
    margin-bottom: 100/75rem;
}


.content {
    margin-top: 210/75rem;
    padding-bottom: 80/75rem;
    position: relative;
    .title {
        font-size: 40/75rem;
        color: #808080;
        position: absolute;
        top: -58%;
        left: 50%;
        transform: translateX(-50%);
    }
    span {
        background: url('../images/mainTwo/commodity/icon_1.png') no-repeat left center;
    }
    .loli_direc {
        position: absolute;
        top: 1400%;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>

